<template>
  <!-- <span class="title">Device Import Records</span> -->
  <div class="condition">
    <!-- <el-form :inline="true" :model="searchForm">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            v-model="searchForm.keyword"
            :placeholder="`${t('module.table.Name')}/${t('module.table.Tel')}`"
            class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search" @click="searchFunc"></el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="10" style="float: right">
          <el-button type="primary" @click="addRole">新增角色</el-button>
        </el-col>
      </el-row>
    </el-form> -->
  </div>
  <div class="datatable">
    <el-table
      :data="result.list"
      border
      style="width: 100%; box-sizing: border-box; height:70vh;overflow:auto;"
    >
      <el-table-column
        prop="created_at"
        :label="t(`module.table.ImportTime`)"
        :align="'center'"
      />
      <el-table-column :label="t(`module.table.Success`)" :align="'center'" prop="success" />
      <el-table-column :label="t(`module.table.Failed`)" :align="'center'" prop="error" />
      <el-table-column
        :label="t(`module.table.Result`)"
        :align="'center'"
      >
        <template #default="scope">
          <label style="text-align: center" v-if="scope.row.error_url == ''"
            >{{ t(`module.table.Success`) }}</label
          >
          <el-button v-else @click="download(scope.row.error_url)"
            >{{ t(`module.table.Download`) }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row :gutter="20">
      <el-col :span="10" :offset="10">
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="result.total"
          class="mt-4"
          @current-change="changePage"
          :current-page="page"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import API from "api";

export default {
  name: "Import-Records",

  setup() {
    const { t } = useI18n();

    let state = reactive({
      result: {
        list: [],
        total: 0,
      },
      page: 1,
    });
    onMounted(() => {
      getImportRecords();
    });

    const getImportRecords = () => {
      API.importRecord({
        page: state.page,
      }).then((res) => {
        state.result = res.data;
      });
    };

    const changePage = (page) => {
      state.page = page;
      getImportRecords();
    };

    const download = (url) => {
      window.open(url);
    };
    return {
      t,
      changePage,
      download,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.title {
  display: block;
  padding: 2rem 1rem;
  font-size: 2rem;
  font-weight: bolder;
  text-align: left;
}
.condition {
    margin-top: 4vh;
}
.search {
  display: flex;
  width: 30rem;
  padding: 1rem;
}
.datatable {
  box-sizing: border-box;
  width: 60vw;
  height: 100%;
  padding: 0.625rem;
}
.ml-1 {
  margin-left: 1rem;
}
</style>
